.navi{width:1000px;margin: 0 auto;
    color: white;font-size: 14px;text-align: center;line-height: 30px;position: relative;}
.naviCover{width:834px;margin: 0 ;background-color: #154386;position: absolute;height: 30px;bottom: 0;z-index: -1;border-radius: 4px;opacity: 0.5;}
.mainMenuUl{width:834px;margin: 0;padding: 0;float:left;}
.mainMenuUl > li{list-style: none;float:left;overflow: hidden;}
.mainMenuUl > li  a{color: white;text-decoration: none;}

/*
 1.一级菜单 通过padding扩充图形面积，如果不使用js  前面的二级菜单 必然会影响级菜单的大小，因为文字会影响content的大小 一二级菜单的content
 不一样大 二级菜单作为 一级 菜单 li的子元素必然会撑大一级  不建议有多个不同内容二级菜单使用这种方式
 2. 菜单如果是固定数量  肯定可以 固定宽度 所以对应的二级菜单也可以固定宽度 不使用padding来扩充内容  一般采取这种方式
 3. 如果菜单数量不固定  不固定的原因是 由服务器决定 要动态加载菜单必须使用js 使用js 就可以动态设置 菜单的大小
*/

/*结论   css做多级 菜单   固定 一二级 菜单的宽度   不要使用padding
*/
.mainMenuUl > li{width: 139px;}
.mainMenuUl > li > span{display: inline-block;width: 139px;height:30px;opacity: 1;}


/*二级菜单显示控制*/
.mainMenuUl > li:hover{opacity: 1;}
.mainMenuUl > li:hover >span{background-color: #154386;font-weight: 600;}
.mainMenuUl > li:hover{background-color: #354986;border-radius: 4px;}
.mainMenuUl > li:hover > .subMenu{display: block;}
.mainMenuUl:after{clear:both;content:'';display: block;}

/*三级菜单显示控制*/
.subMenu > li:hover > .thirdMenu{display: block;}


.subMenu{margin:10px 0  0  0;padding:0;background-color: #354986;display: none;}
.subMenu > li{list-style: none;}


.thirdMenu{margin:10px 0  0  0;padding:0;background-color: #130f86;display: none;}
.thirdMenu > li{list-style: none;}